<template>
	<view class="body">
		<view class="title">
			<view class="login-close" @click="goBack">
				<uni-icons type="back" size="30"></uni-icons>
			</view>	
		</view>
		<view class="title-text">
			<p>请输入注册的邮箱</p>
		</view>
		<view class="login-form">
			<u-form class="login-form_content" :model="form" ref="form" :error-type="['toast']">
				<u-form-item class="login-form_item" prop="login_id" left-icon="email" :left-icon-style="iconStyle">
					<u-input v-model="email" :placeholder="$t('mine.input_email')"
						@focus="showUser = true" />
				</u-form-item>
				<view class="login-button" @click="nextPage">
						<p  class="login-button_p" >下一步</p>
				</view>
			</u-form>
		</view>
	</view>
	
</template>

<script >
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		// computed,
		// onMounted,
		// getCurrentInstance
	} from "vue";
	export default defineComponent({
		 // props: {},
		setup(){
			const data = reactive({
				pages : getCurrentPages(),
				iconStyle: {
					fontSize: '36rpx',
					color: '#000000',
					display: 'flex',
					marginLeft: '15rpx',
				},
				email:"111",
			});
			const goBack =() => {
				if (pages.length > 1) {
					uni.$u.route({
					    type:'back',
					    delta:1
					})
				} else {
					router.push({ path: '/pages/login/index' })
				}
			};
			const nextPage = () =>{
				// ref.uCode.start();

				uni.navigateTo({
					url:`/pages/forget_password/email_code?email=`+data.email
				});
			};
			return {
				...toRefs(data),
				nextPage
			};
		}
	})
</script>

<style lang="scss" scoped>
	.body{
		background-color: #FEFEFE;
		height: 1624rpx;
		width: 100%;
		border-top: 1rpx solid #fff;
	}
	.title{
		display: flex;
		text-align: center;
		vertical-align: middle;
		width: 100%;
		height: 88rpx;
		margin-top: 88rpx;
		.login-close {
			width: 48rpx;
			height: 48rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			// margin-top: 110rpx;
			margin-left: 48rpx;
			.icon {
				font-size: 42rpx;
				color: #000000;
			}
		}
	}
	.title-text{
		width: 100%;
		height: 90rpx;
		line-height: 120rpx;
		margin-top: 120rpx;
		p{	
			margin: 0 auto;
			width: 512rpx;
			height: 90rpx;
			font-size: 64rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 75rpx;
			-webkit-background-clip: text;

		}
	}
	
	.login-form {
		border-radius: 20rpx;
		background-color: #ffffff;
		margin: 80rpx auto;
		padding: 38rpx;
	
		&_content {
			padding: 24rpx 0;
		}
	
		&_item {
			margin: 0 auto;
			width: 622rpx;
			height: 112rpx;
			border-radius: 10rpx;
			background: #000000;
			background-color: rgba(0, 0, 0, 0.03);
		}
	}
	.login-button {
		display: flex;
		width: 622rpx;
		height: 96rpx;
		background: #476BEE;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 0.5;
		align-items: center;
		text-align: center;
		vertical-align: middle;
		margin: 80rpx auto;
		&_p{	
			margin: 0 auto;
			height: 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FEFEFE;
			// line-height: 40rpx;
		}
	}
</style>
